<link rel="stylesheet" href="<%- Virtual_Path.Static %>main/css/mall.css"/>
<!-- cont -->
<div class="xiu-container">
    <div class="mall-hd clearfix">
        <ul class="mall-navi">
            <li class="on">
                <a href="/mall/vip">会员</a>
            </li>
            <li>
                <a href="/mall/motoring">座驾</a>
            </li>
            <li>
                <a href="/mall/guard">守护</a>
            </li>
        </ul>
    </div>
    <div class="mall-bd">

        <div class="mall-pro">
            <div class="mall-pro-bd">
                <div class="ad-mall-vip">
                    <a href="mall/vip"><img src="<%- Virtual_Path.Static %>main/image/mall/mall-vip.jpg"/></a>
                </div>
            </div>
        </div>

        <div class="mall-pro">
            <div class="mall-pro-bd">
                <div class="mall-vip-content clearfix">
                    <div class="mall-vip">
                        <div class="mall-vip-info">
                            <div class="pro-info">
                                <div class="pro-img">
                                    <img alt="" src="<%- Virtual_Path.Static %>main/image/mall/ico-vip.png">
                                </div>
                                <h2>vip徽章</h2>
                                <div class="price-info" >
                                    <p id="J_Pice_List">-</p>
                                    <input type="hidden" name="Vip_Id" value="">
                                </div>
                                <div class="buy-btn">
                                    <a class="mall-btn-buy" href="javascript:;" id="J_Vip_Buy">购买</a>
                                    <!--<a class="mall-btn-giver" href="javascript:;" id="J_Vip_Give">赠送</a>-->
                                </div>
                            </div>
                        </div>
                        <div class="mall-vip-feture">
                            <h1>
                                <i class="ico-vip"></i>
                            </h1>
                            <ul class="feture-list">
                                <li>
                                    <div class="thumb-img">
                                        <img src="<%- Virtual_Path.Static %>main/image/mall/feture/vip-01.png"/>
                                    </div>
                                    <div class="thumb-desc">
                                        <h2>动态表情</h2>
                                        <p>搞笑动态表情，Q版形象，幽默的你不能错过</p>
                                    </div>
                                </li>
                                <li>
                                    <div class="thumb-img">
                                        <img src="<%- Virtual_Path.Static %>main/image/mall/feture/vip-05.png"/>
                                    </div>
                                    <div class="thumb-desc">
                                        <h2>缤纷文字</h2>
                                        <p>缤纷文字，一言一行万众瞩目</p>
                                    </div>
                                </li>
                                <li>
                                    <div class="thumb-img">
                                        <img src="<%- Virtual_Path.Static %>main/image/mall/feture/vip-04.png"/>
                                    </div>
                                    <div class="thumb-desc">
                                        <h2>专属座驾</h2>
                                        <p>进入房间伴有奢华座驾（轿车 LV0），身份更尊贵</p>
                                    </div>
                                </li>

                                <li>
                                    <div class="thumb-img">
                                        <img src="<%- Virtual_Path.Static %>main/image/mall/feture/vip-06.png"/>
                                    </div>
                                    <div class="thumb-desc">
                                        <h2>排名靠前</h2>
                                        <p>房间排位和财富排位都在同级以上</p>
                                    </div>
                                </li>
                                <li>
                                    <div class="thumb-img">
                                        <img src="<%- Virtual_Path.Static %>main/image/mall/feture/vip-more.png"/>
                                    </div>
                                    <div class="thumb-desc">
                                        <h2>更多特权</h2>
                                        <p>更多特权，敬请期待！</p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(function () {
        var Vip = '';
        if (_PageData.VIPList.length < 0) {
            Vip = '<div class="pro-img">' +
                    '暂无VIP' +
                    '</div>';
        }
//        _.forEach(_PageData.VIPList, function (ThisValue, n) {
//            if (n == 0) {
//                Vip += '<p class="on"><i class="icheckbox"><ins class="checked"></ins></i>' + ThisValue.Price + '金币/' + ThisValue.Name + '<input type="hidden" name="Vip_Id" value="' + ThisValue.id + '"></p>';
//            } else {
//                Vip += '<p class=""><i class="icheckbox"><ins class=""></ins></i>' + ThisValue.Price + '金币/' + ThisValue.Name + '<input type="hidden" name="Vip_Id" value="' + ThisValue.id + '"></p>';
//            }
//
//        });
        $("#J_Pice_List").text(_PageData.VIPList[0].Price+'金币/月');
        $('input[name="Vip_Id"]').val(_PageData.VIPList[0].id);

        // 购买vip分类
//        $('#J_Pice_List p').on('click', function () {
//            $(this).addClass("on").siblings().removeClass('on');
//            $('#J_Pice_List p').find('ins').removeClass('checked');
//            $(this).find('ins').addClass('checked');
//        });
        $('#J_Vip_Buy').on('click', function (event) {
            if(!_StateData.IsLogin){
                $.CommonMain.Login('In');
                return true;
            }
            VIP_ID = $.trim($("input[name=Vip_Id]").val()); //道具Id
            if (VIP_ID) {
                $.CommonMain.User_VIPPurchase(VIP_ID,function () {
                    $.CommonMain.Modal_Tip("VIP购买成功!");
                });
            } else {
                $.CommonMain.Modal_Tip("请选择VIP价位!");
            }
        });
    })
</script>